define(function (require) {

    "use strict";

    var $                   = require('jquery'),
        _                   = require('underscore'),
        Backbone            = require('backbone'),
        EmployeeListView    = require('app/views/EmployeeList'),
        models              = require('app/models/employee'),        
        tpl                 = require('text!tpl/Shell.html'),

        template = _.template(tpl),
        $menuItems;
     var stockList;   
    return Backbone.View.extend({

        initialize: function () {
            this.employeeList = new models.EmployeeCollection();
            stockList = JSON.stringify(localStorage.getItem('StockList'));
            if(stockList != null)
            {
                //stockList = JSON.stringify(stockList.models);
                newList111 = stockList;
                console.log(stockList);
            }
            
        },

        render: function () {
            this.$el.html(template());
            var listView = new EmployeeListView({collection: this.employeeList, el: $(".employee-list", this.el)});
            listView.render();
            $menuItems = $('.navbar .nav li', this.el);
            return this;
        },

        events: {
            "keyup .search-query": "search",
            "keypress .search-query": "onkeypress"
        },
        findByName : function (searchKey) {
            var results = stockList.filter(function (element) {
                return element.StockName.toLowerCase().indexOf(searchKey.toLowerCase()) > -1;
            });
            return results;
        },
        search: function (event) {
            var key = $('#searchText').val();
            $('.employee-list').html('');
            if(key.length >0)
            {
                newList = this.findByName(key);
                var html ='';
                for (var i = newList.length - 1; i >= 0; i--) {
                        html += '<li>' + newList[i].Symbol + '-' + newList[i].StockName + '</li>';
                        $('.employee-list').append(html);
                    };
                $('.dropdown').addClass('open');
            } 
            else
            {            
                $('.dropdown').addClass('close');
            }           
            // this.employeeList.fetch({reset: true, data: {name: key}, success: function () {
            //     setTimeout(function () {
            //         $('.dropdown').addClass('open');
            //     });
            // }});
        },				
        onkeypress: function (event) {
            if (event.keyCode === 13) { // enter key pressed
                event.preventDefault();
            }
        },

        selectMenuItem: function (menuItem) {
            $menuItems.removeClass('active');
            if (menuItem) {
                $('.' + menuItem).addClass('active');
            }
        }

    });

});